import { LangType } from '@/i18n/locales'
import StorageState from '@/utils/storageState'

export interface SettingStore {
  canvasBackground: string
  canvasBackgroundValue: React.CSSProperties
  diyCanvasBackgroundColor: string
  lang: LangType
}
export const backgroundColorList: {
  name: string
  style: React.CSSProperties
}[] = [
  {
    name: '网格块',
    style: {
      backgroundSize: '30px 30px',
      backgroundPosition: '0 0, 15px 15px',
      backgroundImage: `linear-gradient(
          45deg,
          #d0d0d0 26%,
          transparent 0,
          transparent 75%,
          #d0d0d0 0
        ),
        linear-gradient(
          45deg,
          #d0d0d0 26%,
          transparent 0,
          transparent 75%,
          #d0d0d0 0
        )`,
    },
  },
  {
    name: '红色',
    style: {
      background: '#e63e56',
    },
  },
  {
    name: '绿色',
    style: {
      background: '#52b139',
    },
  },
  {
    name: '蓝色',
    style: {
      background: '#2f279e',
    },
  },
  {
    name: '292345',
    style: {
      background: '#292345',
    },
  },
]

const defaultValue: SettingStore = {
  canvasBackground: backgroundColorList[0].name,
  canvasBackgroundValue: backgroundColorList[0].style,
  diyCanvasBackgroundColor: '#00ff00',
  lang: 'zh-CN',
}

export const settingStore = new StorageState('settingStore', defaultValue)
